<template>
	<div class="recommend">
		<detail-panel
			:pullUpLoad='false'
			:notice='notice'
			:image='image'
			@leftClick='$router.go(-1)'
			@scrollTop='scrollTop'
			gradient
		>
      <div slot="fixedTop" class="fixedTop">
        <div class="play">
          <div class="icon">
            <i class="iconfont icon-bofang1"/>
          </div>
          <div class="text">
            <span>播放全部</span>
            <span>(共 {{ dailySongs.length }} 首)</span>
          </div>
        </div>
      </div>

			<div slot="background" class="background">
				<div>
					<span class="day">{{ day }}</span>
					<span class="month">/{{ month }}</span>
				</div>
			</div>

			<play-list rank='image' :list="dailySongs" @selectItem='selectItem' />
		</detail-panel>
	</div>
</template>

<script>
import DetailPanel from 'base/detail-panel'
import PlayList from 'components/play-list'
import Song from '@/entity/Song'
import { songs } from 'api/recommend'
import { addZore, randomNum } from '@/utils'

export default {
	components: {
		DetailPanel,
		PlayList
	},
	mounted() {
		this.getRecommendList()
	},
	methods: {
		getRecommendList() {
			songs().then(res => {
				this.dailySongs = res.data.dailySongs.map(item => new Song(item))
				let num = randomNum(0, this.dailySongs.length - 1)
				this.image = this.dailySongs[num].picUrl
			})
		},
		selectItem() {
		},
		scrollTop(value) {
			this.notice = value ? '每日推荐' : ''
		}
	},
	computed: {
		month() {
			return `${addZore(this.now.getMonth() + 1)}`
		},
		day() {
			return `${addZore(this.now.getDate())}`
		}
	},
	data() {
		return {
			dailySongs: [],
			now: new Date(),
			notice: '',
			image: ''
		}
	}
}
</script>
<style lang="less" scoped>
@import '~@/style/variable.less';
@import '~@/style/mixins.less';

.recommend{
	.route-page();
	.fixedTop{
    width: 100%;
    background-color: white;
    .icon{
      width: 40px;
      text-align: center;
      i{
        font-size: 1.2em;
      }
    }
    .play{
      padding: 0 10px;
      font-size: @font-size-small;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .text{
        flex: auto;
        text-align: left;
      }
      .btn{
        display: flex;
        .collected{
          font-size: @font-size-mini;
          padding-right: 10px
        }
      }
    }
	}
	.background{
		height: 100%;
		color: white;
		position: relative;
		>div{
			position:absolute;
			bottom: 30px;
			padding-left: 20px;
			.month{
				font-size: @font-size-big;
			}
			.day{
				font-size: 45px;
			}
		}
	}
}
</style>